<template>
  <div class="app-container">
    <!-- 数据源选择 -->
    <el-row>
      <data-source-chose @changeConnName="changeConnName" @changeNamespace="changeNamespace" />
    </el-row>

    <el-tabs :active-name="tabs.activeTabName" @tab-click="switchTab">
      <el-tab-pane name="dataExport" label="数据导出">
        <data-export :conn-name="connName" :namespace="namespace"/>
      </el-tab-pane>
      <el-tab-pane name="randomData" label="生成随机数据" style="display: flex">
        <TableSearch :conn-name="connName" :namespace="namespace" :show-remark="false" @click-row="configRandomData" />
        <template v-if="tableMeta">
          <table-random-data style="flex: 1" ref="tableRandomData" :conn-name="connName" :table-meta="tableMeta" />
        </template>
      </el-tab-pane>
      <el-tab-pane name="dirtyData" label="脏数据检查">
        <dirty-data-check :conn-name="connName" :namespace="namespace"/>
      </el-tab-pane>
      <el-tab-pane name="configdata" label="配置数据">
        <configdata :conn-name="connName" :namespace="namespace" />
      </el-tab-pane>
      <el-tab-pane name="dataChangeSql" label="数据变更SQL">
        <p>tips: 生成可重复执行的数据变更 SQL 语句</p>
        <data-change-sql :conn-name="connName" :namespace="namespace"/>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
import dataExport from '@/views/database/data/dataExport'
import TableRandomData from '@/views/database/TableRandomData'
import configdata from '@/views/database/data/configdata'
import DirtyDataCheck from '@/views/database/data/DirtyDataCheck'
import DataSourceChose from '@/views/database/DataSourceChose'
import TableSearch from '@/views/database/TableSearch'
import DataChangeSql from '@/views/database/data/DataChangeSql'

export default {
  name: 'dataManager',
  components: { TableSearch, dataExport , TableRandomData, DataSourceChose,configdata,DirtyDataCheck, DataChangeSql},
  data(){
    return {
      tabs: {
        activeTabName: 'randomData'
      },
      connName: null,
      namespace: {
        catalog: null,
        schema: null
      },
      tableMeta: null
    }
  },
  methods: {
    changeConnName(connName){
      this.connName = connName;
    },
    changeNamespace(namespace){
      this.namespace = namespace;
    },
    configRandomData(row){
      this.tableMeta = row;
      this.$nextTick(() => {
        this.$refs.tableRandomData.init();
      })

    },
    switchTab(){

    }
  }
}
</script>


